<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> -->
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用自定义指令 -->
        <!-- <input type="text" v-focus> -->
        <!-- 使用red 指令 -->
        <!-- <p v-red @click="count++">red指令---{{count}}</p> -->
        <!-- <p v-red>其他节点</p> -->
        <!-- <p v-show="flag" v-red @click="flag=!flag">red指令---{{count}}</p> -->

        <!-- 指令的简写方式 -->
        <!-- <p v-green>指令的简写</p> -->

        <!-- 指令的传值 -->
        <p v-color="deepPink" @click="count++">指令的传值--{{count}}</p>

    </div>
</body>

</html>
<script>

    // 自定义指令:
    // 开发者可以根据自己的需求,自己定义指令, 达到操作原生dom 的目的

    // 自定义指令分类:
    // 01: 局部自定义指令 : 只能在当前组件的实例中使用
    // 02: 全局自定义指令: 可以在任意的组件中使用
    const { createApp } = Vue;
    const vm = createApp({
        data() {
            return {
                message1: 'Hello',
                count: 0,
                flag: true,
                deepPink: 'deeppink'
            }
        },
        methods: {

        },
        directives: { // 存放所有的自定义指令
            focus: {
                //  mounted: (el) => el.focus()
                mounted: function (el) {
                    //console.log('el', el); // el 表示标签节点绑定指令的标签节点
                    el.focus();
                    el.value = '我是大神'
                }
            },
            red: {
                //如下都是一些该指令的生命周期钩子函数
                created(el, binding) {
                    // 创建后, 该生命周期无法获取父节点
                    console.log('created', el.parentElement);
                    el.style.background = 'red'
                },
                beforeMount(el) {
                    // 当前绑定指令的元素插入到dom树之前
                    console.log('beforeMount', el.parentNode);
                },
                mounted(el) {
                    // 当绑定指令的元素插入到父节点上之后触发
                    console.log('mounted', el.parentElement);
                },
                beforeUpdate(el) {
                    // 当绑定指令的元素上的数据更新的前触发
                    console.log('beforeUpdate', el.parentElement);
                },
                updated(el) {
                    console.log('updated', el);
                },
                beforeUnmount(el) {
                    // 绑定该指令的标签卸载前
                    console.log('beforeUnmount', el);
                },
                unmounted(el) {
                    // 绑定该指令的标签卸载后
                    console.log('unmounted', el);
                }
            },
            green(el) {
                // 指令的简写方式
                console.log('green-el', el);
            },
            color: {
                created(el, { value }) {
                    // console.log('color', el, binding);
                    el.style.color = value
                },
                beforeUpdate(el, binding, vNode, prevVnode) {
                    console.log(vNode, prevVnode);
                },
                updated(el, binding, vNode, prevVnode) {
                    console.log(vNode, prevVnode);
                }
            },

        }
    }).mount('#app') 
</script>